<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JSX基本语法</title>
    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script crossorigin src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
    const root = ReactDOM.createRoot(document.getElementById('root'))

    class App extends React.Component {
        constructor(props) {
            super();
            this.state = {
                tips: [
                    '1、jsx结构只有一个根元素',
                    '2、jsx结构通常只会包裹一个()，将整个jsx当做一个整体，实现换行',
                    '3、jsx可以使用单标签<br/>',
                    '4、基础类型可以用{}直接展示，对象类型不行。null/undefined/Boolean不会展示',
                    '5、{}中可以插入表达式，也可以插入三目运算符，方法调用'
                ],
            }
        }
        render() {

            const {san} = this.state
            // 这里写注释
            return (

                <div>
                    {/* 标签里的注释这么写 */}
                    <h1 color={'#123'}>JSX基本语法</h1>
                    <ul>
                        {this.state.tips.map((tip, i) => {return <li key={i}>{tip}</li>})}
                    </ul>
                    <a>{san ? san : '三目运算符'}</a>
                </div>
            )
        }
    }
    root.render(<App/>);
</script>
</body>
</html>